<template>
    <div id="app" class="skin_red">

        <div class="header-bottom sub">
            <div class="show cate_menu">
                <template v-for="(item,index) in navList">
                    <a href="javascrip:;" class=""  :key="index" @click="changeNavIndex(index)" :class="{selected:navIndex==index}">{{item.name}}</a>
                    <span :key="'l'+index"  v-if="index!=(navList.length-1)"> | </span>
                </template>
            </div>
        </div>
        <div class="cont-main">
            <div class="cont-col3">
                <div class="u-header play_tab_1 clearfix">
                    <div class="fl">
                        <span id="page_game_name">幸运六合彩</span>
                        &nbsp;&nbsp;-&nbsp;&nbsp;
                        <span id="page_name">{{navList[navIndex].name}}</span>
                        <span id="total_sum_money_text">
                            &nbsp;&nbsp;
                            当前彩种输赢：<span id="total_sum_money">0.00</span>
                        </span>
                    </div>
                    <div class="fr">
                        <span id="next_turn_num">200521180</span>&nbsp;期 距离封盘：
                        <span id="bet-date">已封盘</span> 距离开奖：
                        <span id="open-date">34:44</span>
                    </div>
                </div>
            </div>
            <SubmitComponent @reset="handleReset" ></SubmitComponent>

            <div id="kuaijie" style="display: block;padding: 0 5px 10px;">
                <div align="right" class="clearfix">
                    <button id="changlongchange" class="button" style="height:24px;line-height: 24px;" @click="changeRightFloatType">{{ rightFLoatType=='QuickBet'? '长龙统计' : '快捷投注'}}</button>
                </div>
            </div>

            <TeMa v-if="navIndex==0" ref="TeMa"></TeMa>
            <LiangMian v-if="navIndex==1" ref="LiangMian"></LiangMian>
            <SeBo v-if="navIndex==2" ref="SeBo"></SeBo>
            <TeXiao v-if="navIndex==3" ref="TeXiao"></TeXiao>
            <HeXiao v-if="navIndex==4" ref="HeXiao"></HeXiao>
            <TeMaWeiShu v-if="navIndex==5" ref="TeMaWeiShu"></TeMaWeiShu>
            <ZhengMa v-if="navIndex==6" ref="ZhengMa"></ZhengMa>
            <ZhengMaTe v-if="navIndex==7" ref="ZhengMaTe"></ZhengMaTe>
            <ZhengMa1To6 v-if="navIndex==8" ref="ZhengMa1To6"></ZhengMa1To6>
            <PingTeWeiXiao v-if="navIndex==9" ref="PingTeWeiXiao"></PingTeWeiXiao>
            <ZhengXiao v-if="navIndex==10"  ref="ZhengXiao"></ZhengXiao>
            <SeBo7 v-if="navIndex==11" ref="SeBo7"></SeBo7>
            <ZongXiao v-if="navIndex==12" ref="ZongXiao"></ZongXiao>
            <LianMa v-if="navIndex==13" ref="LianMa"></LianMa>
            <LianXiaoLianWei v-if="navIndex==14" ref="LianXiaoLianWei"></LianXiaoLianWei>
            <ZiXuanBuZhong v-if="navIndex==15" ref="ZiXuanBuZhong"></ZiXuanBuZhong>

            <SubmitComponent @reset="handleReset" @submit="getCurentDatas"></SubmitComponent>


        </div>
        <QuickBet v-if="rightFLoatType=='QuickBet'"></QuickBet>
        <ChangLongRank v-if="rightFLoatType=='CLRank'"></ChangLongRank>
    </div>
</template>

<script>

    import SubmitComponent from './components/SubmitComponent'
    import QuickBet from "./components/QuickBet";
    import ChangLongRank from "./components/ChangLongRank";
    import LiangMian from "./Page/LiangMian";
    import TeMa from "./Page/TeMa";
    import SeBo from "./Page/SeBo";
    import TeXiao from "./Page/TeXiao";
    import HeXiao from "./Page/HeXiao";
    import TeMaWeiShu from "./Page/TeMaWeiShu";
    import ZhengMa from "./Page/ZhengMa";
    import ZhengMaTe from "./Page/ZhengMaTe"
    import ZhengMa1To6 from "./Page/ZhengMaTe1To6";
    import PingTeWeiXiao from "./Page/PingTeWeiXiao";
    import ZhengXiao from "./Page/ZhengXiao"
    import SeBo7 from "./Page/SeBo7"
    import ZongXiao from "./Page/ZongXiao";
    import LianMa from "./Page/LianMa";
    import LianXiaoLianWei from "./Page/LianXiaoLianWei";
    import ZiXuanBuZhong from "./Page/ZiXuanBuZhong";

    import {mapState} from "vuex";
    export default {
        name: 'App',
        components: {
            ZiXuanBuZhong,
            LianXiaoLianWei,
            LianMa,
            ZongXiao,
            SeBo7,
            PingTeWeiXiao,
            ZhengMa1To6,
            ZhengMa,
            ZhengMaTe,
            TeMaWeiShu,
            ZhengXiao,
            HeXiao,
            TeXiao,
            SeBo,
            SubmitComponent,
            QuickBet,
            ChangLongRank,
            TeMa,
            LiangMian
        },
        data() {
            return {
                rightFLoatType:'QuickBet',
                navIndex:0,
                navList:[
                    {name:'特码', ref:'TeMa'},
                    {name:'两面', ref:'TeMa'},
                    {name:'色波', ref:'TeMa'},
                    {name:'特肖', ref:'TeMa'},
                    {name:'特码尾数', ref:'TeMa'},
                    {name:'正码特', ref:'TeMa'},
                    {name:'正码1-6', ref:'TeMa'},
                    {name:'平特一尾肖', ref:'TeMa'},
                    {name:'正肖', ref:'TeMa'},
                    {name:'7色波', ref:'TeMa'},
                    {name:'总肖', ref:'TeMa'},
                    {name:'连码', ref:'TeMa'},
                    {name:'连肖连尾', ref:'TeMa'},
                    {name:'自选不中', ref:'TeMa'}
                    ]
            }
        },
        computed:{
            ...mapState(['betNumber'])
        },

        methods:{
            changeRightFloatType(){
                if (this.rightFLoatType == 'QuickBet') {
                    this.rightFLoatType = 'CLRank'
                } else if (this.rightFLoatType == 'CLRank') {
                    this.rightFLoatType = 'QuickBet'
                }
            },
            changeNavIndex(index) {
                this.navIndex = index
            },
            handleReset(){
                let nowIndex = this.navIndex
                this.navIndex = 0
                this.$nextTick(()=>{
                    this.navIndex = nowIndex
                })
            },
            getCurentDatas(){
                // 只写了TeMa的获取数据方法，其他预留根据实际业务重写
                console.log(this.$refs[this.navList[this.navIndex].ref].getSelectdDatas())
                this.showModal()
            },
            showModal() {
                let html = `
                <div class="skin_blue" style="padding: 20px 20px 10px;">
            <div style="max-height: 380px; overflow-y: auto;">
                <table class="u-table10 orderTable">
                    <thead>
                    <tr>
                        <th style="width: 60%;">号码</th>
                        <th style="width: 15%">赔率</th>
                        <th style="width: 15%">金额</th>
                        <th style="width: 10%">确认</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr data-id="23855">
                        <td style="text-align: left;padding-left:5px;" class="multiple">特码B <i class="lhc_icon lhc_b14">14</i>
                        </td>
                        <td><span class="c-txt3"><span class="c-txt3">48.6</span></span></td>
                        <td><input type="number" style="width: 85%" value="9"></td>
                        <td><input onchange="hello()" value="23855" type="checkbox" checked="checked"></td>
                    </tr>
                    <tr data-id="23858">
                        <td style="text-align: left;padding-left:5px;" class="multiple">特码B <i class="lhc_icon lhc_b17">17</i>
                        </td>
                        <td><span class="c-txt3"><span class="c-txt3">48.6</span></span></td>
                        <td><input type="number" style="width: 85%" value="9"></td>
                        <td><input onchange="hello()" value="23858" type="checkbox" checked="checked"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="bet-bottom" style="margin-top: 10px;"><span class="bcount">组数：<b
                    class="bcountVal">2</b></span><span class="btotal">总金额：<b class="btotalVal">18</b></span></div>
            <div class="cont-col3-hd clearfix">
                <div class="cont-col3-box2"><a href="javascript:void(0)" class="u-btn1 submitOrder">确定</a><a
                        href="javascript:layer.closeAll();" class="u-btn1">取消</a></div>
                <div style="display:none;margin-top:5px;" class="bet-loading">
                    <div class="gif"></div>
                    <div class="txt">正在提交</div>
                </div>
            </div>
        </div>`
                window.layui.use('layer', function () {
                    window.layer.open({
                        type: 1,
                        area: '500px',
                        anim: 2,
                        content: html //这里content是一个普通的String
                    });
                    // var layer = this.layer;
                    // layer.alert('已经封盘，请开盘后再投注', {
                    //     icon: 2,
                    //     skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    // })
                });
            },
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin: 0 auto;
        max-width: 1200px;
    }

</style>
